import React,{useEffect,useState} from 'react'
import {useParams,useNavigate} from 'react-router-dom'
import axios from '../axios/axios'
import { LeftOutline,LikeOutline,MessageOutline,StarOutline } from 'antd-mobile-icons'
import './show.css'
import 'animate.css';
export default function Show() {
    let [show,setShow]=useState([])
    let {id}=useParams()
    let [flag,setFlag]=useState(false)
    let handleLikeClick=()=>{
        setFlag(!flag)
    }
    let navigate=useNavigate()
    useEffect(()=>{
        getshow()
    },[])
    let getshow=async()=>{
        let res=await axios.get(`/show/${id}`)
        setShow(res.data)
    }
  return (
    <div>
        <div className='title'>
            <LeftOutline onClick={()=>{navigate(-1)}} style={{fontSize:'20px',marginLeft:'10px',marginTop:'5px'}}/>
            <h3>文章详情页</h3>
        </div>
        <div className='show'>
            {
                show.map((item,index)=>{
                    return <div key={item._id} >
                        <h2>{item.title}</h2>
                        <h3>{item.content}</h3>
                        <img src={item.img}></img>
                    </div>
                })
            }
        </div>
        <div className='footer'>
            {
                flag?<div className='icon'>
                    <div className="animate__animated animate__bounceIn">
                        <LikeOutline  onClick={handleLikeClick} style={{color:'blue'}}/>
                        <span>已点赞</span>
                    </div>

                </div>:<div className='icon1'>
                    <LikeOutline  onClick={handleLikeClick} />
                    <span>点赞</span>
                 </div>
            }        
            <div className='icon'>
                <MessageOutline />
                <span>回复</span>

            </div>
            <div className='icon'>
                <StarOutline />
                <span>收藏</span>
            </div>
        </div>
    </div>
  )
}
